<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

<title>地址管理</title>

<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet"
	type="text/css">
<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet"
	type="text/css">

<link href="../css/personal.css" rel="stylesheet" type="text/css">
<link href="../css/addstyle.css" rel="stylesheet" type="text/css">
<script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"
	type="text/javascript"></script>
<script src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
<style type="text/css">
</style>


</head>

<body>
	<!--头 -->
	<header>
		<article>
			<div class="mt-logo">
				<!--顶部导航条 -->
				<div class="am-container header">
					<ul class="message-l">
						<div class="topMessage">
							<div class="menu-hd">
								<a href="login.html" target="_top" class="h" id="login">亲，请登录</a> <a
									href="register.html" target="_top">免费注册</a>
							</div>
						</div>
					</ul>
					<ul class="message-r">
						<div class="topMessage home">
							<div class="menu-hd">
								<a href="home2.html" target="_top" class="h">商城首页</a>
							</div>
						</div>
						<div class="topMessage my-shangcheng">
							<div class="menu-hd MyShangcheng">
								<a href="index.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
							</div>
						</div>
						<div class="topMessage mini-cart">
							<div class="menu-hd">
								<a id="mc-menu-hd" href="shopcart.html" target="_top"><i
									class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong
									id="J_MiniCartNum" class="h">0</strong></a>
							</div>
						</div>
						<div class="topMessage favorite">
							
					</ul>
				</div>

				<!--悬浮搜索框-->

				<div class="nav white">
					<div class="logoBig">
						<li><img src="../images/logobig.png" /></li>
					</div>

					<div class="search-bar pr">
						<a name="index_none_header_sysc" href="search.html"></a>
						<form action="search.html">
							<input id="searchInput" name="index_none_header_sysc" type="text"
								placeholder="搜索" autocomplete="off"> <input
								id="ai-topsearch" class="submit am-btn" value="搜索" index="1"
								type="submit">
						</form>
					</div>
				</div>

				<div class="clear"></div>
			</div>
			</div>
		</article>
	</header>

	<div class="nav-table">
		<div class="long-title">
			<span class="all-goods">全部分类</span>
		</div>
		<div class="nav-cont">
			<ul>
				<li class="index"><a href="home2.html">首页</a></li>
				
			</ul>
			<div class="nav-extra">
				<i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利 <i
					class="am-icon-angle-right" style="padding-left: 10px;"></i>
			</div>
		</div>
	</div>
	<b class="line"></b>

	<div class="center">
		<div class="col-main">
			<div class="main-wrap">

				<div class="user-address">
					<!--标题 -->
					<div class="am-cf am-padding">
						<div class="am-fl am-cf">
							<strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small>
						</div>
					</div>
					<hr />
					<ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails" id="address_li">




					</ul>
					<div id="addAddressDiv">
						<div class="clear"></div>
						<a class="new-abtn-type"
							data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
						<!--例子-->
						<div class="am-modal am-modal-no-btn" id="doc-modal-1">

							<div class="add-dress">

								<!--标题 -->
								<div class="am-cf am-padding">
									<div class="am-fl am-cf">
										<strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small>
									</div>
								</div>
								<hr />

								<div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
									<!-- 添加地址的表单 -->
									<form class="am-form am-form-horizontal" id="addressForm">
										<input name="address_userid" type="hidden" id="userid" />
										<div class="am-form-group">
											<label for="user-name" class="am-form-label">收货人</label>
											<div class="am-form-content">
												<input type="text" id="user-name" name="address_username"
													placeholder="收货人" autocomplete="off">
											</div>
										</div>

										<div class="am-form-group">
											<label for="user-phone" class="am-form-label">手机号码</label>
											<div class="am-form-content">
												<input id="user-phone" name="address_phone"
													placeholder="手机号必填" type="email" autocomplete="off">
											</div>
										</div>
										<div class="am-form-group">
											<label for="user-address" class="am-form-label">所在地</label>
											<div class="am-form-content address" id="xxdiv">
												<select id="s_province" name="address_province">
												</select> <select id="s_city" name="address_city"></select> <select
													id="s_county" name="address_town"></select>
												<script class="resources library" src="../js/area.js"
													type="text/javascript"></script>
												<script type="text/javascript">_init_area();</script>
											</div>
										</div>

										<div class="am-form-group">
											<label for="user-intro" class="am-form-label">详细地址</label>
											<div class="am-form-content">
												<textarea class="" rows="3" id="user-intro"
													name="address_addss" placeholder="输入详细地址"
													autocomplete="off"></textarea>
												<small>100字以内写出你的详细地址...</small>
											</div>
										</div>

										<div class="am-form-group">
											<div class="am-u-sm-9 am-u-sm-push-3">
												<a class="am-btn am-btn-danger" onclick="tosubmit()">保存</a>
												<a href="javascript: void(0)"
													class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
											</div>
										</div>
									</form>
								</div>
							</div>

						</div>
					</div>
					<!-- 修改表单 -->
					<div class="am-u-md-12 am-u-lg-8"
						style="margin-top: 20px; display: none" id="address_updateDiv">

						<div class="am-cf am-padding">
							<div class="am-fl am-cf">
								<strong class="am-text-danger am-text-lg">修改地址</strong> / <small>Update&nbsp;address</small>
							</div>
						</div>


						<form class="am-form am-form-horizontal" id="address_updateForm">
							<input name="address_userid" type="text" id="address_userid" />
							<div class="am-form-group">
								<label for="user-name" class="am-form-label">收货人</label>
								<div class="am-form-content">
									<input type="text" id="address_username" name="address_username"
										placeholder="收货人" autocomplete="off">
								</div>
							</div>

							<div class="am-form-group">
								<label for="user-phone" class="am-form-label">手机号码</label>
								<div class="am-form-content">
									<input id="address_phone" name="address_phone" placeholder="手机号必填"
										type="text" autocomplete="off">
								</div>
							</div>
							<div class="am-form-group">
								<label for="user-address" class="am-form-label">所在地</label>
								<div class="am-form-content address" id="xxdiv">
									<!-- 三级联动 -->
									<select id="address_province" name="address_province"> </select> 
									<select id="address_city" name="address_city"></select> 
									<select id="address_town" name="address_town"></select>
									<script class="resources library" src="../js/area.js"
													type="text/javascript"></script>
												<script type="text/javascript">_init_area();</script>
								</div>
							</div>

							<div class="am-form-group">
								<label for="user-intro" class="am-form-label">详细地址</label>
								<div class="am-form-content">
									<textarea class="" rows="3" id="address_addss"
										name="address_addss" placeholder="输入详细地址" autocomplete="off"></textarea>
									<small>20字以内写出你的详细地址...</small>
								</div>
							</div>

							<div class="am-form-group">
								<div class="am-u-sm-9 am-u-sm-push-3">
									<button class="am-btn am-btn-danger" type="button"   id="xiugai" >确认修改</button>
									<a href="javascript: void(0)"
										class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
								</div>
							</div>
						</form>
					</div>




				</div>

				<script type="text/javascript">
						$(document).ready(function() {							
							$(".new-option-r").click(function() {
								$(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
							});
							
							var $ww = $(window).width();
							if($ww>640) {
								$("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
							}
							
						})
					</script>

				<div class="clear"></div>

			</div>
			<!--底部-->
			<div class="footer">
				<div class="footer-hd">
					<p>
						<a href="#">恒望科技</a> <b>|</b> <a href="#">商城首页</a> <b>|</b> <a
							href="#">支付宝</a> <b>|</b> <a href="#">物流</a>
					</p>
				</div>
				<div class="footer-bd">
					<p>
						<a href="#">关于恒望</a> <a href="#">合作伙伴</a> <a href="#">联系我们</a> <a
							href="#">网站地图</a>
					</p>
				</div>
			</div>
		</div>

		<aside class="menu">
			<ul>
				<li class="person active"><a href="index.html"><i
						class="am-icon-user"></i>个人中心</a></li>
				<li class="person">
					<p>
						<i class="am-icon-newspaper-o"></i>个人资料
					</p>
					<ul>
						<li><a href="information.html">个人信息</a></li>
						<li><a href="safety.html">安全设置</a></li>
						<li><a href="address.html">地址管理</a></li>
						<li><a href="cardlist.html">快捷支付</a></li>
					</ul>
				</li>
				<li class="person">
					<p>
						<i class="am-icon-balance-scale"></i>我的交易
					</p>
					<ul>
						<li><a href="order.html">订单管理</a></li>
						<li><a href="change.html">退款售后</a></li>
						<li><a href="comment.html">评价商品</a></li>
					</ul>
				</li>
				<li class="person">
					<p>
						<i class="am-icon-dollar"></i>我的资产
					</p>
					<ul>
						<li><a href="points.html">我的积分</a></li>
						<li><a href="coupon.html">优惠券 </a></li>
						<li><a href="bonus.html">红包</a></li>
						<li><a href="walletlist.html">账户余额</a></li>
						<li><a href="bill.html">账单明细</a></li>
					</ul>
				</li>

				<li class="person">
					<p>
						<i class="am-icon-tags"></i>我的收藏
					</p>
					<ul>
						<li><a href="collection.html">收藏</a></li>
						<li><a href="foot.html">足迹</a></li>
					</ul>
				</li>

				<li class="person">
					<p>
						<i class="am-icon-qq"></i>在线客服
					</p>
					<ul>
						<li><a href="consultation.html">商品咨询</a></li>
						<li><a href="suggest.html">意见反馈</a></li>

						<li><a href="news.html">我的消息</a></li>
					</ul>
				</li>
			</ul>

		</aside>
	</div>
	<select id="s_county" name="s_county"></select>
	<!-- <script class="resources library" src="../js/area.js" type="text/javascript"></script>
	<script type="text/javascript">_init_area();</script> -->

	<script type="text/javascript">
	
	
	
	$(function(){
		var address_userid = localStorage.getItem("user_id");
		$.post("../../addressq",{address_userid:address_userid},function(res){
			console.log(res);
			for (var i = 0; i < res.length; i++) {
				 $("#address_li").append(`
						 <li class="user-addresslist defaultAddr">
						
						<p class="new-tit new-p-re">
							<span class="new-txt">${res[i].address_username}</span>
							<span class="new-txt-rd2">${res[i].address_phone}</span>
						</p>
						<div class="new-mu_l2a new-p-re">
							<p class="new-mu_l2cw">
								<span class="title">地址：</span>
								<span class="province">${res[i].address_province}</span>省
								<span class="city">${res[i].address_city}</span>市
								<span class="dist">${res[i].address_town}</span>区
								<span class="street">${res[i].address_addss}</span></p>
						</div>
						<div class="new-addr-btn">
							<a href="javascript:void(0)" onclick="updateClick(${res[i].address_id})"><i class="am-icon-edit"></i>编辑</a>
							<span class="new-addr-bar">|</span>
							<a href="javascript:void(0)" onclick="delClick(${res[i].address_id})" ><i class="am-icon-trash"></i>删除</a>
						</div>
					</li>		
				`);  
			}
			
		},"json");
	});
	function delClick(i){

		if(confirm("确定要删除吗？")){
	   
	        $.post("../../addressDelete",{address_id:i},function(res){
				if (res.code =="0") {
					alert("删除成功");
					location.reload();
				} else {
					alert("删除失败");
				} 
			     return true;
		 },"json");
	    }else{
	        return false;
	    }
		
		 
	 } 
	//地址修改
	function updateClick(i){
		$("#addAddressDiv").hide();
		$.post("../../addressByaddressId",{address_id:i},function(res){
			console.log(res);
			$("#address_userid").val(res[0].address_id);
			$("#address_addss").val(res[0].address_addss);
			$("#address_city").val(res[0].address_city);
			$("#address_province").val(res[0].address_province);
			$("#address_town").val(res[0].address_town);
			$("#address_username").val(res[0].address_username);
			$("#address_phone").val(res[0].address_phone);
		},"json");
		$("#address_updateDiv").show();
			$("#xiugai").click(function(){
				$.post("../../addressUpdateq",{
					address_id:$("#address_userid").val(),
					address_addss:$("#address_addss").val(),
					address_city:$("#address_city").val(),
					address_province:$("#address_province").val(),
					address_town:$("#address_town").val(),
					address_username:$("#address_username").val(),
					address_phone:$("#address_phone").val()
				},function(res){
					if (res.code =="0") {
						alert("修改成功");
						location.reload();
					} else {
						alert("修改失败");
					}
				},"json");	
				return false;
			})

	}
	
	
	</script>
	
	<script type="text/javascript">

	function tosubmit(){
		var Gid  = document.getElementById ;
		document.getElementById("userid").value = localStorage.getItem("user_id");
		var showArea = function(){
			Gid('show').innerHTML = "<h3>省" + Gid('address_province').value + " - 市" + 	
			Gid('address_city').value + " - 县/区" + 
			Gid('address_county').value + "</h3>"
			Gid('address_county').setAttribute('onchange','showArea()');
		}
		$.post("../../addressAdd",$("#addressForm").serialize(),function(res){
			if (res.code =="0") {
				alert("添加成功");
				location.reload();
			} else {
				alert("添加失败");
			}
		},"json");
		
	return false;
	}



	</script>
	<script type="text/javascript">
		//不锁的页面需要用到的东西
		$(function(){
			if (localStorage.getItem("user_id")!=null) {
				//$("#login").html(localStorage.getItem("user_fullname"));
				document.getElementById('login').innerHTML = localStorage.getItem("user_fullname");
			}
		})
		</script>
		
</body>

</html>